<template>
  <div class="page">
    <div class="module_container">
      <div :class="['now_state', !nowState ? 'active' : '']" @click="currentComponent('OptionComponent')">选项式生命周期</div>
      <div :class="['now_state', nowState ? 'active' : '']" @click="currentComponent('CompositionComponent')">组合式生命周期</div>
    </div>
    <div class="main">
      <component :is="nowKey"></component>
      <!-- <OptionComponent /> -->
      <!-- <Composition /> -->
    </div>
  </div>
</template>
<script setup>
import OptionComponent from './components/options.vue';
import CompositionComponent from './components/composition.vue'
const componentApi = {
  OptionComponent,
  CompositionComponent
}
const nowState = ref(false)
const nowKey = ref(componentApi.OptionComponent)
const currentComponent = (value) => {
  nowState.value = !nowState.value
  nowKey.value = componentApi[value]
}
</script>

<style lang="scss" scoped>
.module_container {
  display: flex;
  justify-content: center;
}
.now_state {
  line-height: 50px;
  margin: 0 10px;
  font-weight: 400;
  cursor: pointer;
}

.now_state:hover {
  color: #42b983;
  /* text-decoration: none; */
}

.active {
  color: #42b983;
}
.main {
  width: 100%;
  height: 300px;
}
</style>